<template>
  <v-app>
    <Topbar />
    <v-content style="background: #EEEEEE">
      <CartItem
        ref="cartItems"
        v-for="item in this.$store.state.shoppingCartItems"
        :itemInfo="item"
        :key="item.id"
        @onCartItemCountChange="displayOverlay"
      >
      </CartItem>
      <Bottombar @onSettlement="handleSettlement" />
      <v-overlay :value="showOverlay">
        <v-progress-circular indeterminate size="64"></v-progress-circular>
      </v-overlay>
      <v-snackbar top color="warning" :timeout="2000" v-model="showMessage">
        至少选择一种商品
      </v-snackbar>
    </v-content>
  </v-app>
</template>

<script>
import Vue from 'vue';
import Topbar from './components/Topbar.vue';
import Bottombar from './components/Bottombar.vue';
import CartItem from './components/CartItem.vue';

export default Vue.extend({
  components: { Topbar, Bottombar, CartItem },
  data() {
    return { showOverlay: false, showMessage: false };
  },
  created() {
    this.refresh();
  },
  methods: {
    refresh() {
      this.showOverlay = true;
      this.$store.dispatch('refreshShoppingCartItems', () => {
        this.showOverlay = false;
      });
    },
    displayOverlay(isShow) {
      this.showOverlay = isShow;
    },
    handleSettlement() {
      const cartItemsInfo = this.$refs.cartItems
        .filter(each => each.onSelected === 1)
        .map(each => each.itemInfo);
      if (cartItemsInfo.length === 0) {
        this.showMessage = true;
        return;
      }
      this.$store.commit('setCurrSettlingProducts', cartItemsInfo);
      this.$router.push({ name: 'FillOrder' });
    }
  }
});
</script>
